<template>
	<view class="box-user">
		<view class="box-user-msg" :style="`margin-top:${start_top} px;`">
			<image
				class="image"
				src="../../static/images/tabBar/user_h.png"
				mode="aspectFill"
			></image>
			<view class="user-msg">
				<view @click="login" class="name">点击登入</view>
				<view class="my_other">
					<text class="my_follow">
						关注:
						<text class="num">0</text>
					</text>
					<text class="my_fans">
						粉丝:
						<text class="num">0</text>
					</text>
				</view>
			</view>
		</view>

		<view @click="need_login" class="box-label-card">
			<view class="label-card">
				<uni-icons class="deep-color deep-size3" type="star-filled"></uni-icons>
				<view class="text">
					收藏
					<text class="num">0</text>
				</view>
			</view>
			<view class="label-card">
				<uni-icons class="deep-color deep-size3" type="heart-filled"></uni-icons>
				<view class="text">
					喜欢
					<text class="num">0</text>
				</view>
			</view>
			<view class="label-card">
				<uni-icons class="deep-color deep-size3" type="chatbubble-filled"></uni-icons>
				<view class="text">
					评论
					<text class="num">0</text>
				</view>
			</view>
		</view>

		<view @click="need_login" class="box-lable-bar">
			<Label-bar
				type="flag-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'历史记录'"
				:num="0"
			></Label-bar>
			<Label-bar
				type="upload-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'我的上传'"
				:num="0"
			></Label-bar>
			<Label-bar
				type="cloud-download-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'下载列表'"
				:num="0"
			></Label-bar>
			<Label-bar
				type="notification-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'订阅更新'"
			></Label-bar>
			<Label-bar
				type="sound-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'随身音乐'"
			></Label-bar>
		</view>

		<view @click="need_login" class="box-lable-bar">
			<Label-bar
				type="mail-open-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'联系客服'"
			></Label-bar>
			<Label-bar
				type="vip-filled"
				class="label-bar"
				:hasBorder="false"
				:text="'关于本站'"
			></Label-bar>
		</view>
	</view>
</template>

<script setup>
import { inject } from 'vue'
import { user_login, need_login } from '../../api'
const start_top = inject('start_top')

const login = function () {
	user_login()
}
</script>

<style scoped lang="scss">
.box-user {
	margin: 0 $my-margin-rpx;
	.box-user-msg {
		// margin-top: 200rpx;
		padding: 90rpx 0 40rpx 0;
		@extend .f-c-c-n;
		align-items: start;

		.image {
			border: 2rpx solid wheat;
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
		}

		.user-msg {
			margin-left: 30rpx;
			flex: 1;
			.name {
				font-size: 45rpx;
				margin: 10rpx 0;
			}

			.my_other {
				font-size: 28rpx;
				margin-top: 20rpx;

				.my_follow {
					color: #555555;
					.num {
						color: black;
						font-weight: 900rpx;
					}
					border-bottom: 1rpx solid #888888;
				}
				.my_fans {
					margin-left: 50rpx;
					color: #555555;
					.num {
						color: black;
						font-weight: 1900rpx;
					}
					border-bottom: 1rpx solid #888888;
				}
			}
		}
	}

	.box-label-card {
		@extend .f-c-c-n;
		justify-content: space-around;
		margin-top: 30rpx;
		.label-card {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10px;
			// border: 1px solid;
			@extend .f-c-c-n;
			flex-direction: column;
			// background-color: white;
			background: radial-gradient(circle, #ffc3b8, #ffffff);
			box-shadow: 0 0 15px #cccccc;
			.text {
				font-size: 25rpx;
				.num {
					color: $my-color1;
				}
			}
		}
	}

	.box-lable-bar {
		margin: 35rpx 0;
		border: 1rpx solid #eee;
		border-radius: 15rpx;
		box-shadow: 0 0 20rpx rgba(175, 175, 175, 0.3);

		.label-bar {
			border-bottom: 1rpx solid #eaeaea;
		}

		.label-bar:last-child {
			border-bottom: none;
		}
	}
}
</style>
